<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-row :gutter="20" type="flex" justify="end">
        <el-col :span="6">
          <div class="demo-input-suffix">
            <span>标签名称</span>
            <el-input placeholder="请输入" v-model="form.tags"> </el-input>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="demo-input-suffix">
            <span>城市</span>
            <province :val="form.province" @setCity="setCity"></province>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="demo-input-suffix">
            <span>地区</span>
            <city :val="form.city" :lists="city_qu" @setQu="setQu"></city>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="demo-input-suffix">
            <span>企业简称</span>
            <el-input placeholder="请输入" v-model="form.shortName"> </el-input>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="demo-input-suffix">
            <span>状态</span>
            <el-select v-model="form.state" placeholder="请选择">
              <el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6" class="largpadding">
          <el-button size="small" @click="clearForm">清除</el-button>
          <el-button type="primary" size="small" @click="search">搜索</el-button>
        </el-col>
        <el-col :span="6">
          <p></p>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button @click="addNew" type="success" icon="el-icon-edit" size="small">新增用户</el-button>
        </el-col>
      </el-row>
      <el-row>
        <div class="searchinfo"><i class="el-icon-info"></i>共 {{ totalNum }} 条记录</div>
      </el-row>
      <template>
        <el-table :data="lists" style="width: 100%" header-cell-classname="textcenter" cell-classname="{'text-align':'center';}">
          <el-table-column prop="id" label="序号"> </el-table-column>
          <el-table-column prop="number" label="企业编号"> </el-table-column>
          <el-table-column prop="company" label="企业简称"> </el-table-column>
          <el-table-column prop="tags" label="标签"> </el-table-column>
          <el-table-column prop="creatorID" label="创建者"> </el-table-column>
          <el-table-column prop="addDate" label="创建日期">
            <template slot-scope="scope">
              {{ scope.row.addDate | dateFormat }}
            </template>
          </el-table-column>
          <el-table-column prop="remarks" label="备注"> </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              {{ Number(scope.row.state) === 1 ? '启用' : '禁用' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button plain @click="edit(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
              <el-tooltip v-if="Number(scope.row.state) === 0" class="item" effect="dark" content="启用" placement="top">
                <el-button plain @click="enable(scope.row)" type="success" icon="el-icon-check" circle></el-button>
              </el-tooltip>
              <el-tooltip v-else class="item" effect="dark" content="禁用" placement="top">
                <el-button plain @click="disabled(scope.row)" type="warning" icon="el-icon-close" circle></el-button>
              </el-tooltip>
              <el-button plain @click="del(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <addoredit :isShowDialog.sync="isShowDialog" :activeValue="activeValue" @updateData="updateData"></addoredit>
      <fenye :totalNum="totalNum" :page="page" :pagesize="pagesize" @changeFenYe="changeFenYe"></fenye>
    </div>
  </div>
</template>

<script>
import { list, remove, disabled } from '@/api/hmmm/companys.js'
import { citys } from '@/api/hmmm/citys.js'
import { status } from '@/api/hmmm/constants.js'
import province from './companycomponents/province.vue'
import city from './companycomponents/city.vue'
import fenye from './companycomponents/fenye.vue'
import addoredit from './companycomponents/addoredit.vue'
export default {
  name: 'CompanysList',
  components: { province, city, addoredit, fenye },
  created () {
    this.init()
    this.status = status
  },
  filters: {
    dateFormat (val) {
      const date = new Date(val)
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      let day = date.getDate()
      day = day < 10 ? '0' + day : day
      return `${year}-${month}-${day}`
    }
  },
  methods: {
    changeFenYe (val) {
      this.page = val.page
      this.pagesize = val.pagesize
      this.init()
    },
    updateData () {
      this.init()
      this.activeValue = {}
    },
    async enable (val) {
      this.$confirm('是否启用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await disabled({
            id: val.id,
            state: 1
          })
          this.$message({
            type: 'success',
            message: '成功起用!'
          })
          this.init()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    async disabled (val) {
      this.$confirm('是否禁用?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await disabled({
            id: val.id,
            state: 0
          })
          this.$message({
            type: 'success',
            message: '成功禁用!'
          })
          this.init()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          })
        })
    },
    del (val) {
      this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove(val)
          // 处理删除导致总页数减少的情况
          if (this.page > Math.ceil((this.totalNum - 1) / this.pagesize)) this.page = this.page - 1
          this.init()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    edit (val) {
      console.log(val)
      this.activeValue = val
      this.isShowDialog = true
    },
    addNew () {
      this.isShowDialog = true
    },
    search () {
      this.init()
    },
    clearForm () {
      this.form = {}
      this.init()
    },
    setCity (val) {
      this.form.province = val
      this.city_qu = citys(val)
      this.form.city = this.city_qu[0]
    },
    setQu (val) {
      this.form.city = val
    },
    // 处理请求参数，哪个表单项有值就添加哪个表单项
    handleReqData () {
      const data = {}
      const keys = Object.keys(this.form)
      keys.forEach(item => {
        if (this.form[item] || this.form[item] === 0)data[item] = this.form[item]
      })
      data.page = this.page
      data.pagesize = this.pagesize
      return data
    },
    async init () {
      const { data } = await list(this.handleReqData())
      this.totalNum = data.counts
      this.lists = data.items
    }
  },
  data () {
    return {
      form: {
        tags: '',
        province: '',
        city: '',
        shortName: '',
        state: ''
      },
      totalNum: 0,
      page: 1,
      pagesize: 10,
      lists: [],
      citys: [],
      city_qu: [],
      status: [],
      isShowDialog: false,
      activeValue: {}
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  background-color: #f0f2f5;
  padding: 20px;
  .app-container {
    background-color: #fff;
  }
}
.el-row {
  margin: 20px 0;
}
.demo-input-suffix {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  span {
    display: block;
    width: 35%;
    width: 120px;
    font-size: 16px;
    font-weight: 700;
    text-align: right;
    padding-right: 10px;
  }
}
.largpadding {
  padding-left: 48px !important;
}
.el-select {
  width: 290px !important;
}
.searchinfo {
  color: #ccc;
  padding: 10px;
  background-color: #f4f4f5;
  i {
    margin-right: 10px;
    color: #909399;
  }
}
::v-deep .el-table__cell {
  text-align: center !important;
}
</style>
